<template>
    <div class="blog-home-container">
        <div v-show="flag" class="blog-home-announcement">
            <div class="blog-home-announcement-left">
                <a-icon type="sound"/>&nbsp;&nbsp;
                <span style="color: gray">公告:
            </span>&nbsp;&nbsp;<span @click="toDetailAnnouncement" style="color: blue">请持续关注我们的微服务博客实战项目</span>
            </div>
            <div class="blog-home-announcement-right">
                <a-icon @click="closeAnnouncement" type="close"/>
            </div>
        </div>

        <div class="blog-user-info">
            <div class="user-info">
                <div class="user-avatar">
                    <a-avatar class="avatar" :src="userInfo.avatarUrl"/>
                </div>
                <div class="user-text">
                    <p>{{ userInfo.nickname }}</p>
                    <div class="blog-level">
                        <div style="border-radius: 3px;">
                            <span class="level-text">博客</span>
                            <span class="level-number">{{ userLevel }}</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="common-entrance">
            <div>
                <a-tabs default-active-key="1">
                    <a-tab-pane key="1" size="small" tab="常用入口">
                        <div class="common-operation">
                            <div @click="toUploadResources" class="upload-resource">
                                <a-icon style="color: crimson" type="upload"/>&nbsp;上传资源
                            </div>
                            <div @click="toRevenueCenter" class="revenue-center">
                                <a-icon style="color: crimson" type="account-book"/>&nbsp;收益中心
                            </div>
                            <div @click="toStargazing" class="blog-data">
                                <a-icon style="color: crimson" type="line-chart"/>&nbsp;博文数据
                            </div>
                            <div @click="toDownloadDetails" class="download-data">
                                <a-icon style="color: crimson" type="line-chart"/>&nbsp;下载数据
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>

        <div class="data-and-revenue">
            <div>
                <a-tabs default-active-key="1">
                    <a-tab-pane key="1" tab="数据与收益">
                        <div class="data-and-revenue-details">
                            <div class="data-and-revenue-prd">
                                <div class="data-and-revenue-pv">
                                    <p class="data-and-revenue-pv-text">总阅读量(PV)</p>
                                    <p class="data-and-revenue-pv-number">{{countPageViewNum}}</p>
                                </div>
                                <div class="data-and-revenue-re">
                                    <p class="data-and-revenue-pv-text">总收益(暂无功能)</p>
                                    <p class="data-and-revenue-pv-number">¥1000000000</p>
                                </div>
                                <div class="data-and-revenue-dl">
                                    <p class="data-and-revenue-pv-text">总下载积分</p>
                                    <p class="data-and-revenue-pv-number">1329</p>
                                </div>
                                <div class="data-and-revenue-bn">
                                    <p class="data-and-revenue-pv-text">总博客数</p>
                                    <p class="data-and-revenue-pv-number">{{blogNumber}}</p>
                                </div>
                            </div>
                            <div class="data-and-revenue-chart">
                                <a-button style="margin-right: 400px" type="success" @click="changeType">切换图表类型
                                </a-button>
                                <ve-chart width="400px" height="360px" :data="chartData"
                                          :settings="chartSettings"></ve-chart>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>

        <div class="recently-published-articles">
            <div>
                <a-tabs default-active-key="1">
                    <a-tab-pane key="1" tab="近期发布文章">
                        <div class="recently-published-articles-details" v-for="(blog, index) in blogStatistics" :key="index">
                            <div class="articles-details-tag">文章</div>
                            <div class="articles-details-blog-info">
                                <p class="articles-details-blog-info-title">{{ blog.blogInfo.title }}</p>
                                <p class="articles-details-blog-info-content">{{ blog.blogInfo.content }}</p>
                            </div>
                            <div class="articles-details-pv">
                                <p class="articles-details-number">{{ parseInt(blog.statistics.pageViewNum/10000) ?
                                    blog.statistics.pageViewNums/10000 + '万+' : blog.statistics.pageViewNum }}</p>
                                <p class="articles-details-text">阅读数</p>
                            </div>
                            <div class="articles-details-comment">
                                <p class="articles-details-number">10</p>
                                <p class="articles-details-text">评论数</p>
                            </div>
                            <div class="articles-details-like">
                                <p class="articles-details-number">{{ parseInt(blog.statistics.blogLinkNum/10000) ?
                                    blog.statistics.blogLinkNum/10000 + '万+' : blog.statistics.blogLinkNum }}</p>
                                <p class="articles-details-text">点赞数</p>
                            </div>
                            <div class="articles-details-favorites">
                                <p class="articles-details-number">{{ parseInt(blog.statistics.favoritesNum/10000) ?
                                    blog.statistics.favoritesNum/10000 + '万+' : blog.statistics.favoritesNum }}</p>
                                <p class="articles-details-text">收藏数</p>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>

        <div class="recently-uploaded-resources">
            <div>
                <a-tabs default-active-key="1">
                    <a-tab-pane key="1" tab="近期上传资源">
                        <div class="recently-published-articles-details">
                            <div class="articles-details-tag">下载</div>
                            <div class="articles-details-blog-info">
                                <p class="articles-details-blog-info-title">nacos-1.2.0-linux-x86_64.tar.gz</p>
                                <p class="articles-details-blog-info-content">Spring Cloud Alibaba
                                    Nacos是阿里巴巴提供的一个很好用的注册中心，非常方便</p>
                            </div>
                            <div class="articles-details-pv">
                                <p class="articles-details-number">56</p>
                                <p class="articles-details-text">下载数</p>
                            </div>
                            <div class="articles-details-comment">
                                <p class="articles-details-number">10</p>
                                <p class="articles-details-text">评论数</p>
                            </div>
                            <div class="articles-details-like">
                                <p class="articles-details-number">10</p>
                                <p class="articles-details-text">积分数</p>
                            </div>
                            <div class="articles-details-favorites">
                                <p class="articles-details-number">999</p>
                                <p class="articles-details-text">收藏数</p>
                            </div>
                        </div>
                        <div class="recently-published-articles-details">
                            <div class="articles-details-tag">下载</div>
                            <div class="articles-details-blog-info">
                                <p class="articles-details-blog-info-title">sentinel-1.2.0-linux-x86_64.tar.gz</p>
                                <p class="articles-details-blog-info-content">Spring Cloud Alibaba
                                    Sentinel是阿里巴巴提供的一个很好用的服务熔断和降级处理的</p>
                            </div>
                            <div class="articles-details-pv">
                                <p class="articles-details-number">56</p>
                                <p class="articles-details-text">下载数</p>
                            </div>
                            <div class="articles-details-comment">
                                <p class="articles-details-number">10</p>
                                <p class="articles-details-text">评论数</p>
                            </div>
                            <div class="articles-details-like">
                                <p class="articles-details-number">8</p>
                                <p class="articles-details-text">积分数</p>
                            </div>
                            <div class="articles-details-favorites">
                                <p class="articles-details-number">888</p>
                                <p class="articles-details-text">收藏数</p>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import {getUserInfo} from "@/api/user/userInfo";
    import {blogStatistics, countBlogNumber, countForChart, getOneBlogStatistics, countPageViewForChart} from "@/api/blog/blogStatistics";
    import {findRecentlyTopNumberBlogInfo, findRecentlyTopNumberBlogInfoByUserId} from "@/api/blog/blogInfo";
    import {userAllStatistics, queryLevel} from "@/api/user/userStatistics";

    export default {
        name: "blog-home",
        data() {
            this.typeArr = [ 'pie', 'line', 'histogram']
            this.index = 0
            return {
                chartData: {
                    columns: ['date', 'pageViewNum'],
                    rows: []
                },
                chartSettings: {type: this.typeArr[this.index]},
                flag: true,
                user: {},
                userInfo: {},
                countType: 0,
                countPageViewNum: 0,
                countLikeNum: 0,
                countFavorites: 0,
                countFans: 0,
                score: 0,
                userLevel: 0,
                userId: null,
                blogNumber: 0,
                blogStatistics: [],
                blogInfos: []
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            closeAnnouncement() {
                this.flag = !this.flag
            },
            toDetailAnnouncement() {

            },
            toUploadResources() {
                this.$router.push('/blogCreateCenter/uploadResources')
            },
            toRevenueCenter() {
                this.$router.push('/blogCreateCenter/revenueCenter')
            },
            toStargazing() {
                this.$router.push('/blogCreateCenter/stargazing')
            },
            toDownloadDetails() {
                this.$router.push('/blogCreateCenter/downloadDetails')
            },
            changeType() {
                this.index++;
                if (this.index >= this.typeArr.length) {
                    this.index = 0
                }
                this.chartSettings = {type: this.typeArr[this.index]}
            },
            init() {
                this.getUserInfo();
                this.getUserLevel();
                this.getAllStatistics();
                this.countBlogNumber();
                this.countPageViewForChart();
                this.findRecentlyTopNumberBlogInfoByUserId();
            },
            /* 获取用户的基本信息 */
            async getUserInfo() {
                const userId = this.$store.state.user.id
                this.userId = userId
                const data = await getUserInfo(userId)
                this.user = data;
                this.userInfo = data.userInfo
                console.log(data)
            },
            /* 获取博客相关的统计信息 */
            async getAllStatistics() {
                const userStatistics = await userAllStatistics(this.userId)
                this.countFans = userStatistics.countFans
                this.score = userStatistics.score
                const blogTotal = await blogStatistics(this.userId)
                this.countType = blogTotal.countType
                this.countPageViewNum = blogTotal.countPageViewNum
                this.countLikeNum = blogTotal.countLikeNum
                this.countFavorites = blogTotal.countFavorites
            },
            /* 获取用户的等级 */
            async getUserLevel() {
                const level = await queryLevel(this.userId)
                this.userLevel = level
            },
            /* 获取该用户下的博客总数 */
            async countBlogNumber() {
                const blogNumber = await countBlogNumber(this.userId)
                this.blogNumber = blogNumber
            },
            /* 用于图表展示数据 */
            async countPageViewForChart() {
                const data = await countPageViewForChart(this.userId);
                this.chartData.rows = data
            },
            /* 获取对应用户最近3条博客记录 */
            async findRecentlyTopNumberBlogInfoByUserId() {
                const blogInfos = await findRecentlyTopNumberBlogInfoByUserId(3, this.userId);
                this.blogInfos = blogInfos;
                await this.getOneBlogStatistics();
            },
            async getOneBlogStatistics() {
                const blogStatistics = []
                for (const blogInfo of this.blogInfos) {
                    const data = await getOneBlogStatistics(blogInfo.id);
                    const blogStatistic = {
                        blogInfo: {},
                        statistics: {}
                    }
                    blogStatistic.blogInfo = blogInfo
                    blogStatistic.statistics = data
                    blogStatistics.push(blogStatistic)
                }
                this.blogStatistics = blogStatistics
            }

        }
    }
</script>

<style scoped>
    .blog-home-announcement {
        line-height: 36px;
        border-radius: 5px;
        height: 36px;
        background: rgba(245, 245, 245, 0.6);
        box-shadow: black;
    }

    .blog-home-announcement-left {
        float: left;
        margin-left: 10px;
    }

    .blog-home-announcement-right {
        float: right;
        margin-right: 10px;
    }

    .blog-user-info {
        margin-top: 10px;
        height: 100px;
    }

    .user-info {
        float: left;
    }

    .user-avatar {
        float: left;
        margin-top: 40px;
    }

    .avatar {
        margin-top: 10px;
        width: 40px;
        height: 40px;
        /*background: #2c3e50;*/
        margin-left: 15px;
        border-radius: 50%;
    }

    .user-text {
        float: left;
        margin-top: 45px;
        margin-left: 10px;
    }

    p {
        margin-bottom: 0;
    }

    .blog-level {
        width: 40px;
        margin-top: 4px;
        border-radius: 3px;
    }

    .level-text {
        font-size: 8px;
        background: lightgreen;
        color: white;
    }

    .level-number {
        font-size: 8px;
        background: green;
        color: white;
        text-align: center;
        width: 14px;
    }

    .common-entrance {
        margin-top: 20px;
    }

    .common-operation {
        margin-top: 15px;
    }

    .upload-resource, .blog-data, .revenue-center, .download-data {
        font-size: 16px;
        line-height: 55px;
        text-align: center;
        border: darkgrey solid 1px;
        margin-right: 10px;
        float: left;
        border-radius: 5px;
        width: 220px;
        height: 55px;
    }

    .download-data {
        margin-right: 0;
    }

    .data-and-revenue {
        margin-top: 20px;
    }

    .data-and-revenue-prd {
        width: 450px;
        float: left;
    }

    .data-and-revenue-pv, .data-and-revenue-re, .data-and-revenue-dl, .data-and-revenue-bn {
        width: 180px;
        height: 200px;
        background: rgba(251, 251, 251, 1);
        float: left;
        margin-right: 25px;
        text-align: center;
    }

    .data-and-revenue-dl, .data-and-revenue-bn {
        margin-top: 10px;
    }

    .data-and-revenue-chart {
        background: rgba(251, 251, 251, 1);
        width: 450px;
        height: 400px;
        float: left;
        text-align: center;
    }

    .data-and-revenue-pv-text {
        font-size: 16px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .data-and-revenue-pv-number {
        font-size: 20px;
        font-weight: bold;
    }

    .recently-published-articles {
        margin-top: 20px;
    }

    .recently-published-articles-details {
        height: 70px;
        margin-top: 10px;
        border-bottom: rgba(248, 248, 248, 1) 1px solid;
    }

    .articles-details-tag {
        float: left;
        width: 45px;
        height: 25px;
        border: darkgrey solid 1px;
        text-align: center;
        line-height: 25px;
    }

    .articles-details-blog-info {
        width: 420px;
        float: left;
        margin-left: 16px;
    }

    .articles-details-blog-info-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .articles-details-blog-info-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
    }

    .articles-details-pv, .articles-details-like, .articles-details-comment, .articles-details-favorites {
        width: 80px;
        float: left;
        margin-left: 25px;
        text-align: center;
    }

    .articles-details-number {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .articles-details-text {
        font-size: 15px;
    }


</style>
